<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21.穿梭框组件</title>
    <script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
    <script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<div id="test1"></div>
<button id="btn1">获取右边的数据</button>
<script>
    layui.use('transfer', function(){
        var transfer = layui.transfer;

        //渲染
        transfer.render({
            elem: '#test1'  //绑定元素
            ,data:     [
                {"id": "1", "name": "李白"}
                ,{"id": "2", "name": "杜甫"}
                ,{"id": "3", "name": "贤心"}
            ]
                // [
                // {"value": "1", "title": "李白", "disabled": "", "checked": ""}
                //     ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
                //     ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
                // ]
            ,id: 'demo1' //定义索引
            ,title: ['标题一', '标题二'] //两个标题
            ,value: ['1','3']
            ,showSearch: true  // 搜索功能
            ,onchange: function (data,index) {
                console.log(data); //得到当前被穿梭的数据
                console.log(index); //如果数据来自左边，index 为 0，否则为 1
                data.forEach(function (data1) {
                    layer.msg(data1.title)
                })

            }
            ,parseData: function(res){
                return {
                    "value": res.id //数据值
                    ,"title": res.name //数据标题
                    ,"disabled": res.disabled  //是否禁用
                    ,"checked": res.checked //是否选中
                }
            }
        });

    });

    $("#btn1").click(function () {
        layui.use("transfer",function () {
            var transfer = layui.transfer;
            //获得右侧数据
            var getData = transfer.getData('demo1');
            console.log(getData)
        })

    });


</script>
</body>
</html>